<template>
	<view class="content">
		<view class="install_list_div">
			<view class="install_item" v-for="(item,index) in install_list" :key="item.id">
				<view style="display: flex;justify-content: space-between;">
					<view>预约时间：{{timestampToDateFormat(item.install_date)}}</view>
					<view style="color: orangered;font-weight: bold;">{{getStatusTxt(item.status)}}</view>
				</view>
				<view>安装型号：{{item.ts}}</view>
				<view>锁体型号：{{item.lock_ts}}</view>
				<view>客户地址：{{item.address}}</view>
				<view>客户电话：{{item.mobile}}</view>
				<!-- <view>客户要求：{{item.remark}}</view> -->
				<!-- <view>赠品：{{item.gift}}</view> -->
				<!-- <view>销售人员：{{item.salesperson}}</view> -->
				<!-- <view>安装人：</view> -->
				<view v-if="item.status == 4 || item.status == 6" style="font-weight: bold;color: red;">
					拒绝原因：{{item.ye_yj}}
				</view>
				<view v-if="item.voucher" style="display: flex;align-items: center;" @click.stop="onCheckImg(item.voucher)">
					<view>结算凭证：</view>
					<image class="img_voucher" :src="item.voucher"></image>
					<view style="color: deepskyblue;font-weight: bold;">点击查看</view>
				</view>

				<!-- <view class="op_btn_div">
					<view class="btn1" @click.stop="onUpload(item)">上传照片</view>
					<view class="btn2" @click.stop="onUpload(item)">查看详情</view>
				</view> -->

			</view>

			<view v-if="!install_list || install_list.length <= 0" style="width: 100%;text-align: center;margin: 10vh 0 0 0;">
				暂无数据~
			</view>

		</view>

		<!-- 展示弹窗 -->
		<view>
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="false">
				<view class="pop_div">
					<view class="pop_div_1">
						优惠券码
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
					</view>

					<view class="pop_div_2">
						<view class="pop_div_2_1">
							<view class="pop_div_2_1_hint">当前优惠券面额:¥{{'0'}}</view>
						</view>
						<view>
							<!-- <image class="img_qrcode" mode="aspectFit" :src="qrdata"></image> -->
							<uqrcode ref="uqrcode" canvas-id="qrcode" :value="genQrContent()"></uqrcode>
						</view>
						<view class="pop_div_2_1">
							<view> </view>
							<view class="pop_div_2_1_hint">请向工作人员展示</view>
						</view>
					</view>

					<view class="pop_div_3">
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
						<view @click="onClosePop">关闭</view>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { getUInfo, timestampToYMDHM, getStatusTxt } from '@/util/util.js'
	const base64 = require('@/util/oss/base64.js')
	const request = require('@/http/request.js')
	export default {
		data() {
			return {
				install_list: [],
				curr_ins: {}, // 记录当前操作的安装对象

				page: 1,
				limit: 99999999,
			}
		},

		onPullDownRefresh() {
			this.getInstallList() // 刷新安装列表
		},

		mounted() {

		},

		onLoad(opts) {
			let that = this

			// 获取query参数(用于安装师傅接单)
			// let params = new URLSearchParams(window.location.search)
			// let id = params.get('id')

			// 此id为分享链接传过来的id
			let id = opts.id
			if (id) {
				id = base64.decode('' + id)
				// 存储id到本地
				uni.setStorageSync('id', id)
			}

			// 从本地存储中取值(1.分享链接带id,直接存到本地后,可直接取到值)
			id = uni.getStorageSync('id')

			if (!getUInfo() || !getUInfo().token) {
				uni.redirectTo({ url: `/pages/login/login` })
			} else {
				if (id) {
					// 在这里进行接单操作 id是营销端分享的base64编码安装单id
					this.receiveOrder(id)
				}
			}
		},

		onShow() {
			let that = this
			that.getInstallList()
		},

		methods: {

			// 查看结算凭证
			onCheckImg(url) {
				uni.previewImage({
					urls: [url],
					success: (res) => {

					},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				});
			},

			// 上传图片
			onUpload(item) {
				uni.showToast({ icon: 'none', title: '上传图片' })
				// uni.navigateTo({ url: '/pages/order_detail/order_detail' })
				uni.navigateTo({
					url: `/pages/order_detail/order_detail?detail=${JSON.stringify(item)}`
				})
			},

			onClickInstall(item) {
				this.onQrCode(item)
			},

			// 生成二维码文本数据
			genQrContent() {
				let that = this
				let myIns = {
					install_code: 'code',
					install_id: 'id',
				}
				return JSON.stringify(myIns)
			},

			// 接口:安装列表
			async getInstallList() {
				this.install_list = []
				let that = this

				let token = getUInfo().token
				uni.showLoading({ title: '处理中', mask: true, })
				let { code, msg, data } = await that.$getInstallList({ status: '7', page: this.page, limit: this.limit, })
				// console.log(`getInstallList...code=${code},msg=${msg},data=`, data)
				if (code == 1) {
					if (!data) return
					this.install_list = data.map((item, index) => {
						if (!item.voucher.startsWith('http:') && !item.voucher.startsWith('https:')) {
							item.voucher = request.URL + item.voucher
						}
						return item
					})
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

			// 接口:安装师傅接单
			async receiveOrder(id) {
				let that = this

				// let token = getUInfo().token
				uni.showLoading({ title: '处理中', mask: true, })
				let { code, msg, data } = await that.$receiveOrder({ id })
				if (code == 1) {
					this.getInstallList() // 接单成功,刷新安装列表
					uni.setStorageSync('id', '') // 接单成功,存储的id置空
					uni.showModal({
						title: '提示',
						content: `您已接单！请按要求上传照片！`,
						showCancel: false,
						success: (res) => {
							if (res.confirm) {

							}
						}
					})
				} else {
					uni.setStorageSync('id', '') // 被他人接单,存储的id置空
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

			getStatusTxt(status) {
				return getStatusTxt(status)
			},

			timestampToDateFormat(ts) {
				return timestampToYMDHM(1000 * ts)
			},


		}
	}
</script>

<style scoped>
	.content {
		display: flex;
	}

	.install_list_div {
		display: flex;
		flex-direction: column;
		width: 100vw;
	}

	.install_item {
		display: flex;
		flex-direction: column;
		/* height: 300rpx; */
		width: calc(100% - 80rpx);
		margin: 20rpx 20rpx 0 20rpx;
		padding: 20rpx;
		background-color: rgba(249, 233, 198, 1);
		/* background-color: rgba(237, 216, 171, 1); */
		/* background-color: rgba(219, 38, 29, 0.3); */
		overflow: scroll;
		/* overflow: hidden; */
		border-radius: 16rpx;
		font-size: 30rpx;
		color: black;
	}

	/* 结算凭证 */
	.img_voucher {
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
		margin: 0 20rpx 0 0;
	}

	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 20rpx 0 0 0;
	}

	.btn1 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: deepskyblue;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}

	.btn2 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: yellowgreen;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}

	.btn3 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: orangered;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}


	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 75vw;
		height: 50vh;
		background-color: white;
		border-radius: 20rpx;
	}

	.pop_div_1 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}

	.pop_div_3 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}
</style>